<template>
  <v-container class="user-guide mb-9">
    <h2 class="user-guide-title">
      {{ $t('userguide') }}
    </h2>
    <v-row :gutter="24" justify="space-around" class="content">
      <NuxtLink
        v-for="(item, i) in lists"
        :key="i"
        :to="localePath({ path: `/articaldetail/${item.id}` })"
        class="card"
      >
        <v-img class="white--text align-end mb-8" height="72px" :src="item.image" contain />
        <span class="title mb-3">
          {{ item.title }}
        </span>
        <span class="desc">
          {{ item.blurb }}
        </span>
      </NuxtLink>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'NewsList',

  data: () => ({
    lists: []
  }),
  async fetch() {
    try {
      const res = await this.$api.post('/home/getArticleList', {
        language: this.$i18n.locale, //
        type: 1, // 类型 1手册 2广告 3产品 4活动
        pageNumber: 1, // 当前页
        pageSize: 10 // 每页数量
      });
      this.lists = res.list;
    } catch (e) {
      console.log(e);
    }
  }
};
</script>
<style scoped lang="scss">
.user-guide-title {
  padding: 16px 12px;
}

.card {
  width: 380px;
  height: 279px;
  border-radius: 10px;
  padding: 40px 52px 36px 53px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &:hover {
    background: #ffffff;
    box-shadow: 0px 30px 80px 0px rgba(0, 0, 0, 0.04);
  }

  .title {
    height: 33px;
    font-family: Poppins, Poppins;
    font-weight: 600;
    font-size: 24px;
    color: #3b3a40;
    line-height: 35px;
    text-align: right;
    font-style: normal;
  }
}
</style>
